<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <link rel="stylesheet" href="../css/news.css">
    <link rel="stylesheet" href="../css/footer.css">
    <style>
        .se1{
            padding: 5px 17px 17px 17px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header-list>div {
            display: flex;
            justify-content: space-between;
            text-align: center;
            margin-bottom: 10px;
        }

        .header-list .top .item {
            width: 50%;
        }

        .header-list .bottom .item {
            width: 33.33333%;
        }

        .header-list .item img {
            width: 95%;
            /* height: 50%; */
            object-fit: contain;
            border-radius: 10px;
            vertical-align: top;
        }
        .type{
            margin-right: 38px;
            font-size: 17px;
            color: #666666;
        }
        .on{
            font-size: 18px;
            color: #333333;
        }
        .search{
            width: 20px;

            /*margin-right: 25px;*/
        }
        .met{
            display: flex;
            align-items: center;
        }
        .se2{
            padding: 0 17px;
        }
        .lei{
            color: #999;
            font-size: 13px;
            margin-right: 35px;
        }
        .se2 .active{
            font-size: 12px;
            background-color: #ead4fc;
            border-radius: 100px;
            padding: 1px 6px;
        }
                /* 电视 */
        #tv {
            font-size: 14px;
            color: #757575;
            line-height: 2;
            overflow: hidden;
            height: 80px;
            position: relative;
            
        }

        #tv .time {
            color: #333;
            margin-right: 10px;
        }

        #tv .clap-icon {
            background-image: url('../image/index/applause.png');
            background-size: 20px;
            background-repeat: repeat-x;
            width: 60px;
            height: 20px;
            background-position: left center;
        }

        #tv .name {
            color: red;
        }

        #tv .gift {
            color: red;
        }

        .up-btn {
            color: red;
            float: right;
            right: 10px;
            padding-right: 20px;
        }

        #tv .tv-content {
            /* animation-name: in; */
            /* animation-duration: 1s; */
            /* position: relative; */
            width: 100%;
            /* left: 0; */
            /* background: #fff; */
            box-sizing: border-box;
            padding: 10px 10px;
            /* display: -moz-box; */
            /* display: -webkit-box; */
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
            color: #333
            ;
        }


        #tv .tv-content img {
            height: 20px;
            width: 20px;
        }
        #tv .content{color: #fff;}
    </style>
</head>
<body>
    <div id="view" v-cloak>
        <header>
            <div class="header-list" v-if="!ios">

                <div class="bottom" style="width: 100vw;">
                    <div class="item area-item" onclick="showDetail('modal/tongchengsupei')">
                        <img :src="_i18nImg('../image/index/3.png')" class="lw" alt="">


                        <!-- <div class="label">同城速配</div> -->
                    </div>
                    <div class="item chat-item" onclick="_url({url:'fuqi/index', title:'夫妻相'})">
                        <img :src="_i18nImg('../image/index/4.png')" class="lw" alt="">
                        <!-- <div class="label">夫妻相</div> -->
                    </div>
                    <div class="item chat-item" onclick="getRankArr()">
                        <img :src="_i18nImg('../image/index/5.png')" class="lw" alt="">
                        <!-- <div class="label">排行榜</div> -->
                    </div>
                </div>

            </div>
            
                <div id="tv" v-if="!ios" style="width: 96%;margin: 0px 2%;border-radius: 10px;background-color: #FAF7FE !important" >
                    

                    <div class="swiper-container" style="width: 100%;">
                        <div class="swiper-wrapper" style="width: 100%;">
                            <div style="width: 100%;" class="swiper-slide"  v-for="(t, index) in tvList" >
                                <div class="tv-content " style="width: 100%;" >
                                    <span class="time">{{t.time}}</span> 
                                    <span class="name">{{t.user_name}}</span>送给
                                    <span class="name">{{t.another_name}}</span>{{t.gift_num}}个
                                    <span class="gift">{{t.gift_name}}</span>
                                    <img  :src="returnImg(t.gift_cover)" alt="">
                                    <br />
                                    掌声响起来... <span class="clap-icon"></span>
                                    <span class="up-btn" onclick="_url({url:'other/dianshi', title:'上电视'})" >📺 如何上电视</span>
                                </div> 
                               
                            </div>
                        </div>
                    </div>

                </div>
          
            <div class="se1">
                <div class="tabss">
                    <!-- <span class="type" :class="{on: act < 4}" onclick="randomSwitchBtn(0, 'one2')">推荐</span> -->
                    <span class="type" :class="{on: act > 3}" onclick="randomSwitchBtn(4, 'one2')">交友</span>
                </div>
                <div class="met">
                    <img src="../image/index_images/filter.png" class="search" onclick="_url({}, 'frame0/search_case')"/>
                    <span>筛选</span>

                 

                </div>
            </div>
            <div class="se2" v-if="act < 4">
                <span class="lei" :class="{active: act === 0}" onclick="randomSwitchBtn(0, 'one2')">热门</span>
                <span class="lei" :class="{active: act === 1}" onclick="randomSwitchBtn(1, 'one2')">最新</span>
                <span class="lei" :class="{active: act === 2}" onclick="randomSwitchBtn(2, 'one2')">关注</span>
                <span class="lei" :class="{active: act === 3}" onclick="randomSwitchBtn(3, 'one2')">附近</span>
            </div>
            <div class="se2" v-else>
                <span class="lei" :class="{active: act === 4}" onclick="randomSwitchBtn(4, 'one2')">推荐</span>
                <span class="lei" :class="{active: act === 5}" onclick="randomSwitchBtn(5, 'one2')">附近</span>
            </div>
 
            <!-- no -->
            <div style="display: none;">
                <li class="list" onclick="_url({url:'no/ok', title:'好友', types: 3})">
                    <div class="content">给测试女(3287)发消息扣金币</div>
                    <div class="time-wrap">
                        <p class="price"><span class="money">+10</span></p>
                        <p class="time">01-01 08:00:00</p>
                    </div>
                </li>
                <li class="list"  onclick="_url({url:'no/index', title:'好友', types: 3})">
                    <div class="content">给测试女(3287)发消息扣金币</div>
                    <div class="time-wrap">
                        <p class="price jian"><span class="money">-10</span></p>
                        <p class="time">01-01 08:00:00</p>
                    </div>
                </li> 
                <li class="list"  onclick="_url({url:'no/meiyong', title:'好友', types: 3})">
                    <div class="content">给测试女(3287)发消息扣金币</div>
                    <div class="time-wrap">
                        <p class="price jian"><span class="money">-10</span></p>
                        <p class="time">01-01 08:00:00</p>
                    </div>
                </li> 
                <li class="list"  onclick="_url({url:'no/no', title:'好友', types: 3})">
                    <div class="content">给测试女(3287)发消息扣金币</div>
                    <div class="time-wrap">
                        <p class="price jian"><span class="money">-10</span></p>
                        <p class="time">01-01 08:00:00</p>
                    </div>
                </li> 
                <li class="list flex-bt new-margin-b-10"  onclick="_url({url:'no/index1', title:'好友', types: 3})">
                    <div class="title">接收新消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt b-bottom"  onclick="_url({url:'no/index2', title:'好友', types: 3})">
                    <div class="title">文章消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt b-bottom"  onclick="_url({url:'no/index3', title:'好友', types: 3})">
                    <div class="title">资讯消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt"  onclick="_url({url:'no/index4', title:'好友', types: 3})">
                    <div class="title">活动消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt"  onclick="_url({url:'no/index4', title:'好友', types: 3})">
                    <div class="title">活动消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt"  onclick="_url({url:'no/index5', title:'好友', types: 3})">
                    <div class="title">活动消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt"  onclick="_url({url:'no/index6', title:'好友', types: 3})">
                    <div class="title">活动消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt"  onclick="_url({url:'no/index7', title:'好友', types: 3})">
                    <div class="title">活动消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt"  onclick="_url({url:'no/index8', title:'好友', types: 3})">
                    <div class="title">活动消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt"  onclick="_url({url:'no/index9', title:'好友', types: 3})">
                    <div class="title">活动消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt"  onclick="_url({url:'no/index10', title:'好友', types: 3})">
                    <div class="title">活动消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt"  onclick="_url({url:'no/index11', title:'好友', types: 3})">
                    <div class="title">活动消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt"  onclick="_url({url:'no/index12', title:'好友', types: 3})">
                    <div class="title">活动消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt"  onclick="_url({url:'no/index13', title:'好友', types: 3})">
                    <div class="title">活动消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li class="list flex-bt"  onclick="_url({url:'no/index14', title:'好友', types: 3})">
                    <div class="title">活动消息通知</div>
                    <div class="btn aui-clearfix select-btn yijia" tapmode onclick="changeMode(this)">
                        <span class="yuan"></span>
                        <span class="text">&nbsp;&nbsp;</span>
                    </div>
                </li>
            </div>
            <div style="display: none;">
                <span class="time">23:35</span> <span class="name">张三张三</span>送给<span class="name">李四李四</span>1个<span class="gift">[花心花心]</span>
                <img src="../../image/test/car1.png" alt="">,掌声响起来...<span class="clap-icon"></span>
                <span class="up-btn">📺 如何上电视</span>
                <span class="up-btn">🔒 锁屏中(10)...</span>
                <span class="up-btn">不是这样的...</span>
                <span class="up-btn">王五...</span>
                <span class="up-btn">黄久...</span>
                <div class="wrap">
                    <p class="title">订单</p>
                    <h3 class="money"><span></span>100</h3>
                    <div class="btn-wrap">
                       <button class="btn wechat" >微信</button>
                        <button class="btn alipay" >支付宝</button>
                        <h3>支付成功</h3>
                    </div>
                    <div>
                        <p class="title">订单金额</p>
                    </div>
                    <p style="font-size: 16px;font-family: Calibri, sans-serif;white-space: normal">
                        <span >您的信任对我们非常重要，我们深知个人信息对您的重要性，我们将按法律法规要求，采取相应安全保护措施，尽力保护您的个人信息安全可控。鉴于此，【</span><span style="font-size: 14px;font-family: 宋体;color: rgb(51, 51, 51)">牵友</span><span>】服务提供者（或简称“我们”或“【</span><span >牵友</span><span>】”）制定本《隐私政策》（下称“本政策 /本隐私政策”）并提醒您：本政策适用于【</span><span >牵友</span><span >】提供的所有产品和服务及我们的关联公司的产品或服务（如【</span><span style="font-size: 14px;font-family: 宋体;color: rgb(51, 51, 51)">牵友</span><span >】小程序），您可使用【</span><span style="font-size: 14px;font-family: 宋体;color: rgb(51, 51, 51)">牵友</span><span >】平台帐号登录上述产品或服务，如上述产品或服务未设独立隐私政策的，则本政策同样适用于该部分产品或服务。</span>
                    </p>
                    <p style="font-size: 16px;font-family: Calibri, sans-serif;white-space: normal">
                        <span >需要特别说明的是，本政策不适用于其他第三方向您提供的服务，也不适用于【</span><span style="font-size: 14px;font-family: 宋体;color: rgb(51, 51, 51)">牵友</span><span >】中已另行独立设置隐私政策的产品或服务。</span>
                    </p>
                </div>
            </div> 
             <!-- no -->

        </header>
        <!-- 脚部 -->
        <footer>
            <ul class="f-wrap flex-c">
                <li class="f-list active">
                    <img src="../image/tabbar/yuanfen_sel.png" alt="">
                    <span>{{_i18n('缘分')}}</span>
                </li>
                <li class="f-list" onclick="_index(1)">
                    <img src="../image/tabbar/dongtai_nor.png" alt="">
                    <span>{{_i18n('动态')}}</span>
                </li>
                <li class="f-list" onclick="_index(7)">
                    <img src="../image/tabbar/supei_nor.png" alt="">
                    <span>{{_i18n('速配')}}</span>
                </li>

                <li class="f-list" onclick="_index(2)">
                    <img src="../image/tabbar/liaotian_nor.png" alt="">
                    <span>{{_i18n('聊天')}}</span>
                    <span class="num new-hide"></span>
                </li>
                <li class="f-list" onclick="_index(4)">
                    <img src="../image/tabbar/wode_nor.png" alt="">
                    <span>{{_i18n('我')}}</span>
                </li>
            </ul>
        </footer>
    </div>
</body>
<script src="../script/jquery.js"></script>
<script src="../script/api.js"></script>
<script src="../script/ffkj.js"></script>
<script src="../script/group.js"></script>
<script src="../script/map.js"></script>
<script src="../script/vue.js"></script>
<script src="../script/update.js"></script>

<script src="../script/swiper.js"></script>
<script src="../script/index.js"></script>
<script>
    
    var view = new Vue({
        el: '#view',
        data: {
            ios: 1, // 1上架 0非上架,
            lbList: [],
            act: 4,
            gonggao: 0,
            bpTime: 0,
            gonggao_content:'',
            bapin: {
                content: '',
                time: 0
            }, // 霸屏
            tvList: [],
            xuni: [],
        },
        methods: {
            // 跳转 查看用户详情
            go_userInfo(id, name, sex) {
                go_userInfo(id, name, sex)
            },
            // 跳转
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            }
        }
    })
    var index_sex = $api.getStorage('sex');
    var map;
    var swiper;
    apiready = function() {
        $api.fixStatusBar($api.dom('header'));
        $api.fixTabBar($api.dom('footer'));
        map = new Map();
        view.ios = $api.getStorage('shang');


        api.addEventListener({
            name:'pause'
        }, function(ret, err){        
            //alert('应用进入后台');
            set_user_pause();
            
        });

        var phoneInfoPlus = api.require('phoneInfoPlus');
            phoneInfoPlus.getName(function(ret) {
        
            _ajax('api/config/set_user_phone_name', function(ret, err) {

            },{
                user_id:$api.getStorage('userid'),
                phone_name:ret.name,

            })

        });


        

        _heibai(1)
        keyback();
        showSlideTime();

        changeMsgNum()
        // 监听消息数量
        _listener('msgNum', function(ret) {
            if (ret && ret.value) {
                var result = ret.value;
                changeMsgNum(result)
            }
        })

        getBapin(
            _ajax('api/Speaker/newest', function(ret, err) {
                if (ret && ret.code == 200) {

                    view.tvList = ret.data
                }
            })
        );
        // 获取首页轮播
        // swiperLoad(function () {
        _getUser(function(ret) {
            view.gonggao = ret.result.gonggao
            view.gonggao_content = ret.result.gonggao_content
            setOnline(1);
            if (ret.result.shoushi) {
                changeFrame(4);
                setTimeout(function() {
                    _url({
                        type: 2,
                        animationType: 0
                    }, 'frame4/pwd');
                }, 100)
            } else {
                changeFrame(4);
            }
            if (ret.result.zhaohu == 1 && !view.ios) {
                setTimeout(function() {
                    showDetail('modal/hi_modal')
                }, 1000)
            }

        })
        // })

        setTimeout(function() {
            updateVision()
        }, 2000)

        is_online();

        setInterval(is_online,600000);
        var announcement_off = $api.setStorage('announcement_off');
        _ajax('api/config/announcement', function(ret, err) {
                if (ret && ret.code == 200) {
    
                    if(ret.data.gonggao == 1){
                        setTimeout(function () {
                            showDetail('modal/index_ad')
                        }, 1000)
                    }
                }
        },{
            user_id:$api.getStorage('userid'),
        })

        




        _listener('newmsg', function(ret) {
            showMsgFrm(ret.value.data)
        })
        _listener('Speaker', function(ret) {
            var result = ret.value.result;
            setTVScroll(result);
            console.log(result);
            console.log('77777');
        })

        getBeauty()
    }



function is_online(){
    _ajax('api/member/is_online', function(ret, err) {

    },{
        user_id: $api.getStorage('userid'),
    })
}

    // 获取排行榜开启状态 0: 该排行榜显示 1隐藏
    //1恩爱(亲密度)|2女神(收到礼物)|3富豪(送出礼物)|4男神(收到礼物)|5家族(威望)|6(魅力值)|8邀请
    function getRankArr() {
        _ajax('api/config/ranking', function(ret, err) {
            if (ret && ret.code == 200) {
                $api.setStorage('rankArr', ret.data);
                _url({}, 'frame0/index_rank_win')
            } else {
                _msg(ret.msg);
            }
        })
    }


      // 显示消息提示
      function showSlideTime(res) {
        setTimeout(function() {
                if (!swiper) {
                    swiper = new Swiper('.swiper-container', {
                        direction: 'vertical', // 垂直切换选项
                        loop: true, // 循环模式选项
                        autoplay: {
                            delay: 3000,
                        },
                        allowTouchMove: false,
                        observer: true, //修改swiper自己或子元素时，自动初始化swiper
                        observeParents: true, //修改swiper的父元素时，自动初始化swiper
                    })
                }
            }, 500)
    }


</script>

</html>
